.ararin-icon {
    width: .22rem;
    height: .22rem;
    display: inline-flex;
    img,
    svg {
        padding: 0;
        margin: 0;
        vertical-align: inherit;
        width: 100%;
        height: 100%;
    }
}

.ararin-icon-spin {
    position: relative;
    animation: ararinSping 1s linear infinite ;
}

.ararin-icon-close {
    margin-right: 0;
}

@keyframes ararinSping {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg)
    }
}

.ararin-icon-showHide {
    cursor: pointer;
    svg {
        stroke: $primary;
    }
    .ararin-icon-showHide-top {
        d: path("M10,49 Q50,10 90,49");
        transition:  .3s all ease-in-out;
    }
    .ararin-icon-showHide-lash-1,
    .ararin-icon-showHide-lash-2,
    .ararin-icon-showHide-lash-3 {
        transition:  .1s all ease-in-out;
        transition-delay: 0s;
    }
    // .ararin-icon-showHide-lash-1 {
    //     d: path("M24,64 24,64");
    // }
    // .ararin-icon-showHide-lash-2 {
    //     d: path("M50,70 50,70");
    // }
    // .ararin-icon-showHide-lash-3 {
    //     d: path("M76,64 76,64");
    // }

    .ararin-icon-showHide-lash-1,
    .ararin-icon-showHide-lash-2,
    .ararin-icon-showHide-lash-3 {
        // d: path("M50,70 50 78");
        stroke-dasharray: 10;
        stroke-dashoffset: 10;
    }
    
    .ararin-icon-showHide-bottom {
        transition:  .3s all ease-in-out;
    }
    .ararin-icon-showHide-eye-ball {
        stroke-dasharray: 100;
        stroke-dashoffset: 0;
        transition:  .3s all ease-in-out;
        transition-delay: 0.15s;
    }
    
    .ararin-icon-showHide-trigger-active {
        stroke: #CECECE;

        .ararin-icon-showHide-top {
            transition-delay: .1s;
            d: path("M10,50 Q50,90 90,50");
        }
    
        .ararin-icon-showHide-eye-ball {
            stroke-dashoffset: 100;
            transition-delay: 0s;
        }

        // .ararin-icon-showHide-lash-1 {
        //     // d: path("M24,64 19,70");
        //     stroke-dasharray: 10;
        //     stroke-dashoffset: 10;
        // }
        // .ararin-icon-showHide-lash-3 {
        //     // d: path("M76,64 81,70");
        // }
        .ararin-icon-showHide-lash-1,
        .ararin-icon-showHide-lash-2,
        .ararin-icon-showHide-lash-3 {
            stroke-dasharray: 0;
            stroke-dashoffset: 0;
            transition: all .1s ease-in-out;
            transition-delay: .3s;
        }
    }
}

.ararin-icon-loading  {
    stroke: rgba(50,181,233, 1);
    transition:  1.8s all ease-in-out;
    animation-fill-mode: forwards;
    .ararin-circle {
        animation: ararinStaticSpin 1s linear infinite;
    }
    .ararin-icon-loading-success-line {
        stroke-dasharray: 80;
        stroke-dashoffset: 80;
    }

    .ararin-icon-loading-failed-lineOne,
    .ararin-icon-loading-failed-lineTwo {
        stroke-dashoffset: 100;
        stroke-dasharray: 100;
    }
}

@keyframes ararinStaticSpin {
    from {
        transform: rotate(-135deg);
        transform-origin: 50% 50%;
    }
    to {
        transform: rotate(-495deg);
        transform-origin: 50% 50%;
    }
}

.ararin-icon-loading.ararin-icon-failed {
    stroke: $danger;

    .ararin-circle {
        animation: ararinAllCircle 1.1s linear, ararinStaticSpin 1s linear infinite;
        animation-fill-mode: forwards;
    }

    @keyframes ararinAllCircle {
        0% {
            stroke-dashoffset: 330;
            transform-origin: 50% 50%;
        }
        60% {
            stroke-dashoffset: 564;
        }
        100% {
            transform-origin: 50% 50%;
            stroke-dashoffset: 564;
        }
      }
    
  .ararin-icon-loading-failed-lineOne {
    animation: ararinLineOne .35s linear;
    animation-fill-mode: forwards;
    animation-delay: 0.8s
  }

  @keyframes ararinLineOne {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
  }

  .ararin-icon-loading-failed-lineTwo {
    animation: ararinLineTwo .55s ease;
    animation-fill-mode: forwards;
    animation-delay: 1.15s;
  }

  @keyframes ararinLineTwo {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
  }
}

.ararin-icon-loading.ararin-icon-success {
    stroke: $success;

    .ararin-circle {
        animation: ararinAllCircle 1.1s linear, ararinStaticSpin 1s linear infinite;
        animation-fill-mode: forwards;
    }

    @keyframes ararinAllCircle {
        0% {
            stroke-dashoffset: 330;
            transform-origin: 50% 50%;
        }
        60% {
            stroke-dashoffset: 564;
        }
        100% {
            transform-origin: 50% 50%;
            stroke-dashoffset: 564;
        }
      }
    .ararin-icon-loading-success-line {
        animation: ararinloadingSuccessLine .83s ease-in-out;
        animation-fill-mode: forwards;
        animation-delay: 0.8s
    }

    @keyframes ararinloadingSuccessLine {
        from {
          stroke-dashoffset: 80;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
}